<template>
	<view>
		<!-- pages/goods_list/goods_list.wxml -->
		<!-- 搜索框 开始 -->
		<uni-nav-bar :class="isTop?'fixed':''" color="#000" background-color="#fff" right-icon="scan"
			@clickRight="scanCode">
			<view class="input-view">
				<uni-icons style="line-height: 30px;" type="search" size="16" color="#666666" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="优选好物" @click="toSearch">
			</view>
		</uni-nav-bar>
		<!-- 搜索框 结束 -->
		<!-- 监听自定义事件 -->
		<Tabs :tabs="tabs" @tabsItemChange="handleTabsItemChange">
			<block v-if="tabs[0].isActive">
				<view class="first_tab">
					<navigator v-for="(item, index) in goodsList" :key="index" class="goods_item"
						:url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id">
						<!-- 左侧 图片容器 -->
						<view class="goods_img_wrap">
							<image mode="widthFix"
								:src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'">
							</image>
						</view>
						<!-- 右侧 商品容器 -->
						<view class="goods_info_wrap">
							<view class="goods_name">{{item.goods_name}}</view>
							<view class="goods_price">￥{{item.goods_price}}</view>
						</view>
					</navigator>
				</view>
			</block>
			<block v-else-if="tabs[1].isActive">1</block>
			<block v-else-if="tabs[2].isActive">2</block>
		</Tabs>
	</view>
</template>

<script>
	// pages/goods_list/goods_list.js
	// 引入用来发送请求的方法 一定要把路径补全
	import {
		request
	} from "../../request/index.js";
	import regeneratorRuntime from "../../lib/runtime/runtime";
	import Tabs from "../../components/Tabs/Tabs";

	export default {
		data() {
			return {
				//是否置顶
				isTop: false,
				tabs: [{
					id: 0,
					value: "综合",
					isActive: true
				}, {
					id: 1,
					value: "销量",
					isActive: false
				}, {
					id: 2,
					value: "价格",
					isActive: false
				}],
				goodsList: [],
				// 接口要的参数
				QueryParams: {
					query: "",
					cid: "",
					pagenum: 1,
					pagesize: 10
				},
				// 总页数
				totalPages: 1
			};
		},

		components: {
			Tabs
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// console.log(options);
			this.QueryParams.cid = options.cid || "";
			this.QueryParams.query = options.query || "";
			this.getGoodsList();
		},
		//滚动置顶
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.isTop = true;
			} else {
				this.isTop = false;
			}
		},
		// 页面上滑 滚动条触底事件
		onReachBottom() {
			// console.log("页面触底");
			// 1. 判断有没有下一页数据
			if (this.QueryParams.pagenum >= this.totalPages) {
				// console.log("没有");
				wx.showToast({
					title: '没有下一页数据'
				});
			} else {
				// console.log("有");
				this.QueryParams.pagenum++;
				this.getGoodsList();
			}
		},

		// 下拉刷新事件
		onPullDownRefresh() {
			// console.log("刷新了");
			// 1. 重置数组
			this.setData({
				goodsList: []
			}); // 2. 重置页码

			this.QueryParams.pagenum = 1; // 3. 发送请求

			this.getGoodsList();
		},

		methods: {
			//搜索
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			//调用扫码
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 获取商品列表数据
			async getGoodsList() {
				const res = await request({
					url: "/goods/search",
					data: this.QueryParams
				}); // console.log(res);
				// 获取总条数

				const total = res.total; // 计算总页数

				this.totalPages = Math.ceil(total / this.QueryParams.pagesize); // console.log(this.totalPages);

				this.setData({
					// 拼接了数组
					goodsList: [...this.goodsList, ...res.goods]
				}); // 关闭下拉刷新的窗口

				wx.stopPullDownRefresh();
			},

			// 标题点击事件 从子组件传递过来
			handleTabsItemChange(e) {
				// console.log(e);
				// 1. 获取被点击的标题索引
				const {
					index
				} = e.detail; // 2. 修改原数组

				let {
					tabs
				} = this;
				tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false); // 3. 赋值到data中

				this.setData({
					tabs
				});
			}

		}
	};
</script>
<style>
	@import "./goods_list.css";

	.fixed {
		position: fixed;
		width: 100%;
		top: 84rpx;
		/* #ifdef APP-PLUS || MP-WEIXIN */
		top: 0rpx;
		/* #endif */
		left: 0;
		z-index: 9999
	}

	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		width: 500rpx;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>
